<template>
  <div>
    <a-card>
      <div class="flex flex-a-c  alarm-title">
        <span v-if="model.color" :style="{ color: model.color }">
          <a-icon
            :style="{ color: model.color, 'margin-right': ' 2px' }"
            theme="filled"
            type="check-circle"
          />
          {{ runStateOptionCase(model.runstate, "label") }}
        </span>
        <span class="colorin">{{ model.productLine }}</span>
      </div>
      <a-row :gutter="24">
        <a-col :xl="12" :xxl="12">
          <div style="" class="infoimg">
            <img
              :src="model.pic? `${apiUrl}${model.pic}` : defultimg"
              alt=""
              :onerror="onerrorimg"
            />
          </div>
        </a-col>
        <a-col :xl="12" :xxl="12">
          <div class="flex flex-a-c">
            <div class="machine-title colorin white">机床信息</div>
            <!-- <a-button
              v-if="show"
              icon="check-circle"
              type="primary"
              @click="handleEdit"
              >完成
            </a-button>
            <a-button v-else icon="edit" type="primary" @click="handleEdit"
              >编辑
            </a-button> -->
          </div>
          <a-form-model
            :labelCol="labelCol"
            :model="model"
            :wrapperCol="wrapperCol"
            labelAlign="left"
          >
          <a-form-model-item label="SN号">
              <span v-if="!show" class="colorin">{{ model.macSn || "" }}</span>
              <a-input
                v-else
                v-model="model.macSn"
                :disabled="true"
                placeholder="请输入SN号"
              />
            </a-form-model-item>
            
            <!-- <a-form-model-item label="设备规格">
              <span v-if="!show" class="colorin">{{
                model.equipmentSpecification || ""
              }}</span>
              <a-input
                v-else
                v-model="model.equipmentSpecification"
                placeholder="请输入设备规格"
              />
            </a-form-model-item> -->

            <a-form-model-item label="设备编号">
              <span v-if="!show" class="colorin">{{
                model.equipmentNumber || ""
              }}</span>
              <a-input
                v-else
                v-model="model.equipmentNumber"
                placeholder="请输入设备编号"
              />
            </a-form-model-item>

            <a-form-model-item label="设备名称">
              <span v-if="!show" class="colorin">{{ model.equipmentName || "" }}</span>
              <a-input
                v-else
                v-model="model.equipmentName"
                :disabled="true"
                placeholder="请输入设备名称"
              />
            </a-form-model-item>

            <a-form-model-item label="设备型号">
              <span v-if="!show" class="colorin">{{
                model.equipmentModel || ""
              }}</span>
              <a-input
                v-else
                v-model="model.equipmentModel"
                placeholder="请输入设备型号"
              />
            </a-form-model-item>

            <!--   line-2  -->

            <!-- <a-form-model-item label="联网方式">
              <span v-if="!show" class="colorin">{{
                model.networkWayName
              }}</span>
              <a-select
                v-else
                v-model="model.networkWay"
                :default-value="model.networkWay"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                placeholder="请选择联网方式"
                style="width:100%"
              >
                <a-select-option
                  v-for="item in netTypeArray"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.dictName }}
                </a-select-option>
              </a-select>
            </a-form-model-item> -->

            <!-- <a-form-model-item label="设备类型">
              <span v-if="!show" class="colorin">{{
                model.equipmentTypeName || ""
              }}</span>
              <a-tree-select
                v-else
                v-model="model.equipmentType"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :replaceFields="{
                  children: 'equipmentTypeList',
                  title: 'equipmentTypeName',
                  key: 'id',
                  value: 'id',
                }"
                :tree-data="equipmentTypeList"
                allow-clear
                placeholder="请选择设备类型"
                show-search
                style="width: 100%"
                tree-default-expand-all
              >
              </a-tree-select>
            </a-form-model-item> -->

            <!--   line-4  -->

            <a-form-model-item label="机床图片">
              <div class="imgBox">
                <div
                  v-for="item in pictureList"
                  :key="item.name"
                  class="imgItem"
                >
                  <imageUpload
                    v-if="show"
                    v-model="item.fileObj"
                    :imagUrl="item.img ? item.img : ''"
                    :type="2"
                    :width="'50px'"
                  />
                  <img
                    v-else
                    :onerror="onerrorpicture"
                    :src="model.pic? `${apiUrl}${model.pic}` : defultimg"
                    alt=""
                    class="picture"
                    @click="openimg(item.img)"
                    style=" width: 50px;  height: 50px;"
                  />
                </div>
              </div>
            </a-form-model-item>
          </a-form-model>
        </a-col>

        <!-- <a-col :xl="12" :xxl="12">
          <div class="infoAlarmbox">
            <h4 class="colorin white">当前报警</h4>
            <div v-if="model.runstate == 2000">
              <a-table
                :locale="locale"
                :columns="columns"
                :data-source="alarmData"
                size="small"
                :scroll="{ y: 300 }"
                :pagination="false"
              ></a-table>
            </div>

            <a-empty v-else description="暂无数据" style="margin-top: 80px" />
          </div>
        </a-col> -->
      </a-row>
    </a-card>
  </div>
</template>

<script>
import api from "@api/apiServer";
import { pictureUrl } from "@/api/URLConfig";
import { apiUrl } from "@/api/URLConfig";
import { runStateOptionCase, columns } from "./config";
import { createNamespacedHelpers } from "vuex";
import { equipmentType, toolData } from "./config";
const { mapState } = createNamespacedHelpers("menu/");
import imageUpload from "@components/upload/upload.vue";

export default {
  name: "WorkShopAlarm",
  components: { imageUpload },
  data() {
    return {
      netTypeArray: [],
      equipmentTypeList: [],
      equipmentType,
      toolData,
      previewimg: "",
      pictureList: [{ name: "正面", value: "positive" }], // 机床图片
      model: {},
      modal1Visible: false,
      params: {},
      form: { type: undefined, forever: 0 },
      defultimg: require("@images/defaultImg.png"),
      onerrorpicture: 'this.src="' + require("@images/imgdefult.png") + '"',
      onerrorimg: 'this.src="' + require("@images/defaultImg.png") + '"',
      columns,
      alarmData: [],
      isShow: true,
      show: false,
      locale: {
        emptyText: "暂无数据",
      },
      labelCol: {
        xl: { span: 6 },
        xxl: { span: 6 },
      },
      wrapperCol: {
        xl: { span: 12 },
        xxl: { span: 12 },
      },
      apiUrl
    };
  },
  computed: {
    ...mapState(["authBtnlists"]),
    macSN() {
      return this.$route.query.macSn;
    },
    imgUrl() {
      return pictureUrl;
    },
    userInfo() {
      return JSON.parse(localStorage.getItem("userInfo"));
    },
  },
  mounted() {
    this.getSelArchiveAndGuide();
    this.getSelMacAlarm();
    this.getEquipmentTypeList()
  },

  methods: {
    runStateOptionCase,
    // 获取报警数据
    async getSelMacAlarm() {
      let params = { macSn: this.macSN };
      const { data: res } = await api.SelCurrentMacAlarm(params);
      this.alarmData = res;
    },
    // 机床信息
    async getSelArchiveAndGuide() {
      const { data: res } = await api.selArchiveAndGuide({ macSn: this.macSN });
      if(res && res.equipment) {
        this.model = res.equipment;
        this.model.productLine = res.productLine;
        // if (res.pictures.length > 0) {
        //   this.model.picture = res.pictures.find(
        //     (item) => item.description === "positive"
        //   ).pictureUrl;
        // }
        if(res.equipment.status) {
          this.model.runstate = res.equipment.status;
          this.model.color = this.runStateOptionCase(res.equipment.status, "color");
        } else {
          this.model.runstate = '4000';
        this.model.color = this.runStateOptionCase('4000', "color");
        }
        
        this.isShow = true;
      }
    },
    reload() {
      //局部刷新
      this.isShow = false;
      this.$nextTick(() => {
        setTimeout(() => {
          this.getSelArchiveAndGuide();
        }, 100);
      });
    },
    // 机床信息编辑
    handleEdit() {
      if (this.show) {
        this.$emit("setAlarm");
        this.updateArchiveAndGuide();
      } else {
        this.show = true;
        this.$forceUpdate();
      }
    },
    // 获取设备类型数据源
    async getEquipmentTypeList() {
      const { data: res } = await api.equipmentTypeList();
      this.equipmentTypeList = res;
    },
    // 获取联网方式数据源
    async getDictFindByCode() {
      const { data: res } = await api.DictFindByCode({
        parentCode: "dict.networkWay",
      });
      this.netTypeArray = res;
    },
    openimg(img) {
      if (img) {
        this.previewimg = this.img;
        this.previewVisibleopen = true;
      }
    },
    async updateArchiveAndGuide() {
      let picture = {};
      this.pictureList.forEach((item) => {
        if (item.fileObj && item.fileObj.length > 0) {
          picture[item.value] = item.fileObj[0].id + "";
        }
      });
      if (!this.model.equipmentModel || this.model.equipmentModel === "") {
        this.$message.error("请输入设备型号");
        return;
      }
      if (!this.equipmentType) {
        this.$message.error("请选择设备类型");
        return;
      }

      let params = {
        macSn: this.model.macSn,
        pictureId: JSON.stringify(picture),
        equipmentSpecification: this.model.equipmentSpecification,
        equipmentNumber: this.model.equipmentNumber,
        equipmentModel: this.model.equipmentModel,
        networkWay: this.model.networkWay,
        equipmentType: this.model.equipmentType,
      };

      const res = await api.UpdateArchiveAndGuide(params);
      if (res.code === 200) {
        this.$message.success(res.message);
        await this.getSelArchiveAndGuide();
        this.show = false;
      } else {
        this.$message.error(res.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@assets/styles/varibless.less";

.alarm-title {
  height: 28px;
  margin-bottom: 10px;
  span {
    margin-right: 20px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: @lightlingtColor;
    line-height: 28px;
  }
}
.infoimg {
  width: 350px;
  height: 296px;
  float: left;
  img {
    width: 100%;
    height: 100%;
  }
}
::v-deep .ant-form-item {
  margin-bottom: 16px;
}
</style>
